<template>
    <ynet-content id="requestPin" :headerInformation="true" :headerMenu="true" class="main-container">
        <div ><!--提示当前位置  电话银行账户状态维护-->
			<ynet-breadcrumb></ynet-breadcrumb>
		</div>
        <div  v-if="main">
            <div>
                <el-form ref="queryForm" :model="queryForm" class="formEmbedTable mt20" :rules="rules">
                    <table>
                        <caption>Enquiry</caption>
                        <tr>
                            <td> query type</td>
                            <td colspan='3'>
                                <el-form-item prop="queryType">
                                    <el-select v-model="queryForm.queryType">
                                        <template v-for="item in typeOptions">
                                            <el-option :label="item.label" :value="item.value"></el-option>
                                        </template>         
                                    </el-select>
                                </el-form-item>
                            </td>					
                        </tr>
                        <tr v-if="queryForm.queryType=='P'">
                            <td>TBS No.</td>
                            <td>
                                <el-form-item  prop="TBSID">
                                    <el-input v-model="queryForm.TBSID"></el-input>
                                </el-form-item>             
                            </td>
                        </tr>
                        <tr v-if="queryForm.queryType=='U'">
                            <td>CUS.ID</td>
                            <td>
                                <el-form-item  prop="CUSID">
                                    <el-input v-model="queryForm.CUSID"></el-input>
                                </el-form-item>             
                            </td>
                        </tr>
                        <tr v-if="queryForm.queryType=='C'">
                            <td>document number</td>
                            <td>
                                <el-form-item  prop="documentID">
                                    <el-input v-model="queryForm.documentID"></el-input>
                                </el-form-item>             
                            </td>
                        </tr>
                        <tr v-if="queryForm.queryType=='C'">
                            <td>document type</td>
                            <td>
                                <el-form-item  prop="documentType">
                                    <el-input v-model="queryForm.documentType"></el-input>
                                </el-form-item>             
                            </td>
                        </tr>
                        <tr v-if="queryForm.queryType=='C'">
                            <td>country code</td>
                            <td>
                                <el-form-item  prop="documentCountry">
                                    <el-input v-model="queryForm.documentCountry"></el-input>
                                </el-form-item>             
                            </td>
                        </tr>
                    </table>
                </el-form>
            </div>
            <div class="btnArea mt20 tac">
                <el-button type="primary" @click="queryAccInfo('queryForm')">Search</el-button>
            </div>
        </div>
        <div class="fourForm tableForm mt20 tableData">
            <el-table :data="dateList" @select="selectCheckBox" @select-all="selectCheckBox" border>
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="TBS No." prop="primaryAcc"></el-table-column>
                <el-table-column label="CUS.ID" prop="userNo" ></el-table-column>
                <el-table-column label="document number" prop="certNo"></el-table-column>
                <el-table-column label="Customer Name" prop="accChName"></el-table-column>
             <!--   <el-table-column label="LAST ACTIVE DATE" prop="Time"></el-table-column>  -->
                <el-table-column label="TBS A/C Status" prop="status"></el-table-column>
                
            </el-table>
        </div>
        <div>
            <el-form ref="queryForm1" :model="queryForm1" class="formEmbedTable mt20" :rules="rules1">
                <table>
                    <tr>
                        <td>Reamrk</td>
                        <td>
                            <el-form-item  prop="remark">
                                <el-input v-model="queryForm1.remark"></el-input>
                            </el-form-item>             
                        </td>
                    </tr>
                </table>
            </el-form>
        </div>
        <div class="btnArea mt20 tac">
            <el-button type="primary" @click="suspendAction">Suspend</el-button>
            <el-button type="primary" @click="reactiveAction">Reactive</el-button>
        </div>

        <!--成功-->
                <el-dialog :visible.sync="changeDialogVisible" size=tiny class="tac" :close-on-click-modal="false" :close-on-press-escape="false">
                    <div class="tableForm mt20">
                        <div class="transactionStatus">
                            <ynet-icon Type="transactionStatus" NO="1"></ynet-icon>
                            <span class="ml15">Adding a hang operation successful !</span>
                        </div>
                        <div class="btnArea mt20 tac">
                            <el-button type="primary" @click="changeDialogVisible = false">Confirm</el-button>
                        </div>
                    </div> 
                </el-dialog>
                <!--成功-->

    </ynet-content>
</template>

<script>
	export default {
		name:'accFreezeActive',
		components:{
		},
		data(){
            return { 
                main:true,
                changeDialogVisible:false,
                typeOptions:[
                    {value:'P',label:'TBS No.'},
                    {value:'U',label:'CUS.ID'},
                    {value:'C',label:'document number'},
                ],
                rules:{
                    queryType:[
                        {required:true,message:'Can not be enpty',trigger:'blur'},
                    ],
                    TBSID:[
                        {validator:this.validatorAcc, trigger:'blur'},
                    ],
                    CUSID:[
                        {validator:this.validatorUserNo, trigger:'blur'},
                    ],
                    documentID:[
                        {validator:this.validatorDocumentID, trigger:'blur'},
                    ],
                    documentType:[
                        {required:true,message:'Can not be enpty',trigger:'blur'},
                    ],
                    documentCountry:[
                        {required:true,message:'Can not be enpty',trigger:'blur'},
                    ],
                },
                rules1:{
                    remark:[
                        {required:true,message:'Can not be enpty',trigger:'blur'},
                    ],
                },
                queryForm:{
                    queryType:'',
                    TBSID:'',
                    CUSID:'',
                    documentID:'',
                    documentType:'',
                    documentCountry:'',
                },
                queryForm1:{
                    remark:'',
                },
                dateList:[],
                optionList:[],
            }   
        },
		methods:{ 
            
            resetForm(formName){
                    this.$refs[formName].resetFields();
            },
            //勾选
            selectCheckBox(selection,row){   //一次只容许勾选一个
                let _this=this
                if(_this.optionList.length > 1){
                    this.$alert('Current operation allows only noe option to be checked !',{
                        confirmButtonText: 'Confirm',
                        callback: action => {
                        }
                    })
                }else{
                    _this.optionList = selection
                }
                
            },
            //账号校验
           validatorAcc(rule, value, callback){
                let _this = this
                if("" == value || undefined == value) return callback("Please input account number")
                if(!(/^[0-9]*$/.test(value))){
                    return callback("Please enter the correct format of the account !") 
                }
                callback()
            },
            validatorUserNo(rule, value, callback){
                let _this = this
                if("" == value || undefined == value) return callback("Please enter the customer number !")
                if(!(/^[0-9]*$/.test(value))){
                    return callback("Please enter the correct format of the customer number !") 
                }
                callback()
            },
            validatorDocumentID(rule, value, callback){
                let _this = this
                if("" == value || undefined == value) return callback("Please enter the certificate number !")
                if(!(/^[0-9]*$/.test(value))){
                    return callback("Please enter the correct format of the certificate number !") 
                }
                callback()
            },
            queryAccInfo(){
                this.$refs.queryForm.validate((valid)  => {
                  if(valid){
                        let queryData = {}
                        if('P' == this.queryForm.queryType){
                            queryData.accNo = this.queryForm.TBSID
                        }else if('U' == this.queryForm.queryType){
                            queryData.queryUserNo = this.queryForm.CUSID
                        }else if('C' == this.queryForm.queryType){
                            queryData.certNo = this.queryForm.documentID
                            queryData.certType = this.queryForm.documentType
                            queryData.certCountry = this.queryForm.documentCountry
                        }
                        queryData.reqTP = this.queryForm.queryType
                        this.$tools.request(this,"IM080206Action.do",queryData).then(data=>{
                            this.dateList = []
                            if(data.body.errorCode==0){
                                    this.dateList=data.body.accoPhoneInfoList                   
                            }else{
                                this.$alert("System Error Try again", "warning",{
                                        confirmButtonText: 'Confirm',
                                        callback: action => {
                                        }
                                    })
                            }
                        })
                  }
                })
                
            },
            suspendAction(){
                if(this.optionList.length == 1){
                     let stt = '1'
                     this.changeStatus(stt)
                }else {
                    this.$alert('Please select an option to check !',{
                        confirmButtonText: 'Confirm',
                        callback: action => {
                        }
                    })
                }
            },
            reactiveAction(){
                if(this.optionList.length == 1){
                     let stt = '0'
                     this.changeStatus(stt)
                }else {
                    this.$alert('Please select an option to check !',{
                        confirmButtonText: 'Confirm',
                        callback: action => {
                        }
                    })
                }
            },
            changeStatus(value){
                this.$refs.queryForm1.validate((valid)  => {
                    if(valid){
                        let queryData = {}
                        queryData.primaryAcc = this.optionList[0].primaryAcc
                        queryData.action = value
                        queryData.remark = this.queryForm1.remark
                        console.log('queryData11',queryData)
                        this.$tools.request(this,"IM080207Action.do",queryData).then(data=>{
                            console.log("data:"+JSON.stringify(data))
                            if(data.body.errorCode==0){
                                this.changeDialogVisible = true 
                                this.queryForm1.remark = '' 
                                this.queryAccInfo()    
                            }else{
                                this.$alert("System Error Try again", "warning",{
                                        confirmButtonText: 'Confirm',
                                        callback: action => {
                                        }
                                    })
                            }
                        })
                    }
                })

            },
            
		}
	}
</script>